<template>
<div class="content">
  <h1 class="title">
    <slot name="title"></slot>
  </h1>
  <ul>
    <li>
      <div class="song-item">
          <span class="item-index"></span>
          <span class="item-title">歌曲</span>
          <span class="item-name">歌手</span>
          <span class="item-intro">专辑</span>
      </div>
    </li>
    <li v-for="(item,index) in listOfSong" :key="index" @click="playSong(item)">
      <div class="song-item">
        <span class="item-index">{{index+1}}</span>
        <span class="item-title">{{item.name.split('-')[1]}}</span>
        <span class="item-name">{{item.name.split('-')[0]}}</span>
        <span class="item-intro">{{item.introduction}}</span>
      </div>
    </li>
  </ul>
</div>
</template>

<script>
export default {
name: "SongListContent",
  props:['listOfSong'],
  methods:{
    playSong(item){
      this.$bus.$emit('searchPlaySong',item)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/album-content.scss";
</style>
